<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.aClass {
			color: red;
		}
		
		.bClass {
			color: blueviolet;
		}
		
		.cClass {
			font-size: 30px;
		}
	</style>

	<body>
		<div id="app">
			<p class="cClass" :class="a">字符串绑定样式</p>
			<p :class="{aClass: isA, cClass: isB}">json对象绑定样式</p>
			<button @click="update">更新</button>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				a: "aClass",
				isA: true,
				isB: false
			},
			methods: {
				update() {
					this.a = "bClass"
					this.isA = false,
						this.isB = true
				}
			}
		})
	</script>

</html>
